<template>
  <div class="header-container">
    <span class="title">{{ title }}</span>
    <span class="time">{{ time }}</span>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import moment from 'moment'
const title = ref('智慧路灯驾驶舱')
const time = ref('')
const timer = ref(null)
const setTime = () => {
  timer.value = setInterval(() => {
    time.value = moment().format('YYYY/MM/DD  HH:mm:ss')
  }, 1000)
}
onMounted(() => {
  setTime()
})
onUnmounted(() => {
  clearInterval(timer.value)
  timer.value = null
})
</script>

<style lang="scss" scoped>
.header-container {
  width: 100%;
  height: 130px;
  box-sizing: border-box;
  background: url(~@@/images/screen/header_bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  .title {
    font-size: 35px;
    font-family: lianmengqiyilushuaizhengruiheiti;
    font-weight: 400;
    font-style: italic;
    color: #ffffff;
    background: linear-gradient(0deg, #b3bac7 0%, #fbfdff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 22px;
    left: 43%;
    letter-spacing: 5px;
  }
  .time {
    font-size: 18px;
    font-family: Eras Demi ITC;
    font-weight: 400;
    color: #d8a032;
    position: absolute;
    top: 11px;
    right: 45px;
  }
}
</style>
